'use client';


import { useParams, useRouter } from 'next/navigation';
import { Card, CardBody } from "@heroui/card";
import { Image } from "@heroui/image";
import { Chip } from "@heroui/chip";
import { Button } from "@heroui/button";
import { Divider } from "@heroui/divider";

// 模拟漫画详情数据
const getMangaDetail = (id: string) => {
    const mangaDetails = {
        "1": {
            id: "1",
            title: "进击的巨人",
            author: "谏山创",
            rating: 9.2,
            status: "已完结" as const,
            tags: ["动作", "剧情", "悬疑", "战争"],
            chapters: 139,
            cover_url: "https://heroui.com/images/card-example-3.jpeg",
            description: "在这个世界上，人类居住在由三重巨大的城墙所围成的都市里。在城墙外面，有着会吃人的巨人徘徊着，而城墙内的人们就如同圈养的家畜般生活着。主人公艾伦·耶格尔对于只能在城墙内侧生活的现状抱有疑问，向往着城墙外面的世界。",
            publishDate: "2009-09-09",
            updateDate: "2021-04-09",
            views: 1250000,
            favorites: 89000,
            chapters_list: Array.from({length: 139}, (_, i) => ({
                id: i + 1,
                title: `第${i + 1}话`,
                updateDate: "2021-04-09",
                isRead: i < 10
            }))
        },
        // 可以添加更多漫画数据
    };

    return mangaDetails[id as keyof typeof mangaDetails] || mangaDetails["1"];
};

// 为静态导出生成参数
export async function generateStaticParams() {
    // 生成1-20的漫画ID
    return Array.from({length: 20}, (_, i) => ({
        id: (i + 1).toString()
    }));
}

export default function MangaDetail() {
    const params = useParams();
    const router = useRouter();


    const manga = getMangaDetail(params.id as string);

    const statusColor = {
        "连载中": "success",
        "已完结": "primary",
        "暂停": "warning"
    }[manga.status] as "success" | "primary" | "warning";

    const handleReadChapter = (chapterId: number) => {
        router.push(`/content/mangas/${manga.id}/read?chapter=${chapterId}`);
    };

    const handleStartReading = () => {
        router.push(`/content/mangas/${manga.id}/read?chapter=1`);
    };

    return (
        <div className="container mx-auto px-4 py-6 max-w-7xl">
            {/* 返回按钮 */}
            <Button
                variant="light"
                className="mb-4"
                onPress={() => router.back()}
                startContent={
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                    </svg>
                }
            >
                返回
            </Button>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {/* 左侧 - 封面和基本信息 */}
                <div className="lg:col-span-1">
                    <Card className="sticky top-4">
                        <CardBody className="p-0">
                            <div className="relative">
                                <Image
                                    alt={manga.title}
                                    className="w-full object-cover h-[400px] lg:h-[500px]"
                                    src={manga.cover_url}
                                    removeWrapper
                                />
                                <Chip
                                    color={statusColor}
                                    size="md"
                                    className="absolute top-4 left-4 z-10 font-medium"
                                >
                                    {manga.status}
                                </Chip>
                            </div>

                            <div className="p-6">
                                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                                    {manga.title}
                                </h1>

                                <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
                                    <div className="flex justify-between">
                                        <span>作者:</span>
                                        <span className="text-gray-900 dark:text-white">{manga.author}</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span>评分:</span>
                                        <div className="flex items-center gap-1">
                                            <svg className="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                            </svg>
                                            <span className="text-gray-900 dark:text-white font-medium">{manga.rating}</span>
                                        </div>
                                    </div>
                                    <div className="flex justify-between">
                                        <span>章节:</span>
                                        <span className="text-gray-900 dark:text-white">{manga.chapters}话</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span>阅读量:</span>
                                        <span className="text-gray-900 dark:text-white">{manga.views.toLocaleString()}</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span>收藏:</span>
                                        <span className="text-gray-900 dark:text-white">{manga.favorites.toLocaleString()}</span>
                                    </div>
                                </div>

                                <Divider className="my-4" />

                                <div className="flex gap-2 flex-wrap mb-4">
                                    {manga.tags.map((tag, index) => (
                                        <Chip
                                            key={index}
                                            size="sm"
                                            variant="flat"
                                            color="secondary"
                                            className="text-xs"
                                        >
                                            {tag}
                                        </Chip>
                                    ))}
                                </div>

                                <div className="flex gap-2">
                                    <Button
                                        color="primary"
                                        className="flex-1"
                                        onPress={handleStartReading}
                                    >
                                        开始阅读
                                    </Button>
                                    <Button
                                        variant="bordered"
                                        isIconOnly
                                        className="text-red-500 border-red-500 hover:bg-red-50"
                                    >
                                        <svg className="w-5 h-5 fill-current" viewBox="0 0 20 20">
                                            <path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd"/>
                                        </svg>
                                    </Button>
                                </div>
                            </div>
                        </CardBody>
                    </Card>
                </div>

                {/* 右侧 - 详情内容 */}
                <div className="lg:col-span-2">
                    <Card>
                        <CardBody className="p-6">
                            {/* 漫画简介 */}
                            <div className="mb-6">
                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
                                    作品简介
                                </h3>
                                <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
                                    {manga.description}
                                </p>
                            </div>

                            <Divider className="mb-6" />

                            {/* 章节列表 */}
                            <div>
                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                                    章节列表 ({manga.chapters})
                                </h3>
                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 max-h-96 overflow-y-auto">
                                    {manga.chapters_list.slice(0, 12).map((chapter) => (
                                        <Card
                                            key={chapter.id}
                                            className={`cursor-pointer transition-all hover:scale-105 ${
                                                chapter.isRead
                                                    ? 'bg-gray-100 dark:bg-gray-800'
                                                    : 'hover:shadow-md'
                                            }`}
                                            isPressable
                                            onPress={() => handleReadChapter(chapter.id)}
                                        >
                                            <CardBody className="p-3">
                                                <div className="flex justify-between items-center">
                                                    <span className={`font-medium ${
                                                        chapter.isRead
                                                            ? 'text-gray-500 dark:text-gray-400'
                                                            : 'text-gray-900 dark:text-white'
                                                    }`}>
                                                        {chapter.title}
                                                    </span>
                                                    {chapter.isRead && (
                                                        <Chip size="sm" color="success" variant="flat">
                                                            已读
                                                        </Chip>
                                                    )}
                                                </div>
                                                <span className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                    {chapter.updateDate}
                                                </span>
                                            </CardBody>
                                        </Card>
                                    ))}
                                </div>
                            </div>
                        </CardBody>
                    </Card>
                </div>
            </div>
        </div>
    );
}